<template>
  <div style="padding: 20px">
    <a-table
      :rowKey="pk"
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :size="size"
      :bordered="bordered"
      :scroll="scroll"
      :rowSelection="
        mode !== 'checkbox' && mode !== 'radio'
          ? null
          : {
              type: mode,
              selectedRowKeys: selectedRowKeys,
              fixed: true,
              onChange: onSelectChange,
            }
      "
      :pagination="
        !pagination
          ? false
          : {
              current: pageNo,
              pageSize: pageSize,
              total: total,
              showSizeChanger: true,
              showQuickJumper: true,
              pageSizeOptions: ['10', '20', '30'],
              showTotal: (total) => `共 ${total} 条`,
              onChange: jumpPage,
              onShowSizeChange: changePageSize,
            }
      "
    >
      <span slot="pic" slot-scope="text, record">
        <img :src="record.imgUrl" alt="" style="height: 40px; width: 40px" />
      </span>
      <template v-slot:no="text, record, index">
        <div>{{ (pageNo - 1) * pageSize + index + 1 }}</div>
      </template>
      <template v-slot:status="scopedSlots">
        <span
          class="statusColor"
          :class="
            scopedSlots.status === '0' ? 'statusColorGreed' : ' statusColorRed'
          "
        ></span>
        <span>{{ scopedSlots.statusName }}</span>
      </template>
      <template v-slot:action="scopedSlots">
        <div class="action">
          <a-button
            class="btn"
            type="primary"
            @click="editClick(scopedSlots, '1')"
          >
            {{ scopedSlots.status === "0" ? "下架 " : "上架" }}
          </a-button>
          <a-button
            class="btn"
            type="primary"
            @click="editClick(scopedSlots, '2')"
          >
            修改
          </a-button>
          <a-button
            class="btn"
            type="primary"
            @click="editClick(scopedSlots, '3')"
          >
            删除
          </a-button>
          <!-- <a href="javascript:;" @click="editClick(scopedSlots, '1')"> </a> -->
          <!-- <a href="javascript:;" @click="editClick(scopedSlots, '2')">修改</a>
          <a href="javascript:;" @click="editClick(scopedSlots, '3')">删除</a> -->
          <!-- <a-popconfirm :title="'确认删除？'" @confirm="handleConfirm(row)">
            <a href="javascript:;">删除</a>
          </a-popconfirm> -->
          <!-- <a href="javascript:;" @click="goDetail">详情</a> -->
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    pk: { type: String, default: "id" },
    columns: { type: Array, default: () => [] },
    dataSource: { type: Array, default: () => [] },
    tableLoading: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
    pagination: { type: Boolean, default: true },
    total: { type: Number, default: 0 },
    size: { type: String, default: "default" },
    mode: { type: String, default: "" },
    active: { type: Array, default: () => [] },
    scroll: { type: Object, default: () => {} },
  },
  data() {
    return {
      selectedRowKeys: this.active,
      pageNo: 1,
      pageSize: 10,
    };
  },
  methods: {
    editClick(row, index) {
      this.$emit("editClick", { row, index });
    },
    jumpPage(pageNo, pageSize) {
      this.pageNo = pageNo || this.pageNo;
      this.pageSize = pageSize || this.pageSize;
      this.$emit("queryData", { pageNo: pageNo, pageSize: pageSize });
    },
    changePageSize(pageNo, pageSize) {
      this.pageNo = pageNo;
      this.pageSize = pageSize;
      this.$emit("queryData", { pageNo: pageNo, pageSize: pageSize });
    },
    // 选中，取消选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("select", this.selectedRowKeys);
    },
    // 清空selectedRowKeys
    clearSelect() {
      this.selectedRowKeys = [];
    },
    // 在父组件刷新数据时调用子组件传入当前分页参数
    refreshData() {
      this.$emit("queryData", { pageNo: this.pageNo, pageSize: this.pageSize });
    },
    handleConfirm(row) {
      // this.$emit('del')
      console.log("删除咯", row);
    },
    goDetail() {
      this.$router.push({ name: "tableDetail" });
    },
  },
};
</script>

<style lang="less" scoped>
.action {
  display: flex;
  justify-content: space-around;
}
.btn {
  margin-right: 10px;
}
.statusColor {
  display: inline-block;
  height: 10px;
  width: 10px;
  vertical-align: baseline;
  border-radius: 10px;
  margin-right: 5px;
}
.statusColorRed {
  background-color: red;
}
.statusColorGreed {
  background-color: rgb(44, 216, 10);
}
</style>
